<template>
  <Dialog :title="title" :model-value="visible" width="600px" :before-close="closeForm">
    <Form
      :schema="schema"
      :model="app"
      @register="formRegister"
      :isCol="false"
      label-width="120px"
      :rules="rules"
    />
    <template #footer>
      <el-space>
        <BaseButton :loading="loading" type="primary" @click="save">确定</BaseButton>
        <BaseButton @click="resetForm">重置</BaseButton>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import * as appApi from '@/flow/api/flowApp'
import { Dialog } from '@/components/Dialog'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
export default {
  components: {
    Dialog,
    Form
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    appClassify: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '新增流程应用',
      source: {},
      app: {
        AppName: null,
        AppShow: null,
        AppClassify: null,
        AppType: 0,
        FlowId: null,
        FlowVer: null
      },
      schema: [],
      rules: {
        AppName: [
          {
            required: true,
            message: '应用名不能为空！',
            trigger: 'blur'
          }
        ],
        AppClassify: [
          {
            required: true,
            message: '应用分类不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    formRegister,
    initScheme() {
      const list = [
        {
          field: 'AppName',
          label: '应用名称',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '应用名称'
          }
        },
        {
          field: 'AppClassify',
          label: '流程应用分类',
          component: 'TreeDicItem',
          componentProps: {
            placeholder: '流程应用分类',
            dicId: DictItemDic.flowType,
            on: {
              change: (val) => {
                this.app.AppClassify = val
                this.initScheme()
              }
            }
          }
        },
        {
          field: 'FlowId',
          label: '选择流程',
          component: 'FlowInput',
          componentProps: {
            placeholder: '选择流程',
            disabled: this.app.AppClassify == null,
            flowType: this.app.AppClassify,
            on: {
              change: (val, flow) => {
                if (flow) {
                  this.app.FlowVer = flow.VerNum
                } else {
                  this.app.FlowVer = null
                }
              }
            }
          }
        },
        {
          field: 'AppType',
          label: '应用类型',
          component: 'Select',
          componentProps: {
            placeholder: '应用类型',
            options: [
              {
                label: '内部应用',
                value: 0
              },
              {
                label: '外部应用',
                value: 1
              }
            ]
          }
        }
      ]
      if (this.app.AppType == 0) {
        list.push({
          field: 'TitleTemplate',
          label: '标题模版',
          component: 'Input',
          componentProps: {
            maxLength: 300,
            placeholder: '标题模版'
          }
        })
      }
      list.push({
        field: 'AppShow',
        label: '应用说明',
        component: 'Input',
        componentProps: {
          maxLength: 100,
          type: 'textarea',
          placeholder: '应用说明'
        }
      })
      this.schema = list
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      } else if (this.id) {
        this.set(data)
      } else {
        this.add(data)
      }
    },
    async set(data) {
      data.FlowVer = this.app.FlowVer
      await appApi.Set(this.id, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async add(data) {
      data.FlowVer = this.app.FlowVer
      await appApi.Add(data)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async reset() {
      if (this.id == null) {
        this.title = '新增流程应用'
        this.source = null
        this.app = {
          AppName: null,
          AppShow: null,
          AppClassify: this.appClassify,
          TitleTemplate: null,
          AppType: 0,
          FlowId: null,
          FlowVer: null
        }
      } else {
        const data = await appApi.Get(this.id)
        this.source = data
        this.app = Object.assign({}, data)
        this.title = '编辑流程应用:' + data.AppName
      }
      this.initScheme()
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.id == null) {
        this.app = {
          AppName: null,
          AppShow: null,
          AppClassify: this.appClassify,
          TitleTemplate: null,
          AppType: 0,
          FlowId: null,
          FlowVer: null
        }
      } else {
        this.app = Object.assign({}, this.source)
      }
      formMethods.setValues(this.app)
    }
  }
}
</script>
